<template>
  <div class="role-new">
    <div class="list">
      <span>角色姓名：</span>
      <el-input class="com-input" placeholder="请输入角色姓名" v-model="name"/>
    </div>
    <div class="list manage">
      <span>权限管理：</span>
      <div class="right">
        <div class="title">企业管理</div>
        <el-checkbox-group v-model="companyCheck">
          <el-checkbox v-for="company in companyMange" :label="company" :key="company">{{company}}</el-checkbox>
        </el-checkbox-group>

        <div class="title">医疗网络</div>
        <el-checkbox-group v-model="companyCheck">
          <el-checkbox v-for="hosNet in hosNetworkList" :label="hosNet" :key="hosNet">{{hosNet}}</el-checkbox>
        </el-checkbox-group>

        <div class="title">用户管理</div>
        <el-checkbox-group v-model="companyCheck">
          <el-checkbox
            v-for="userManage in userManageList"
            :label="userManage"
            :key="userManage"
          >{{userManage}}</el-checkbox>
        </el-checkbox-group>

        <div class="title">数据字典</div>
        <el-checkbox-group v-model="companyCheck">
          <el-checkbox
            v-for="wordBook in wordBookList"
            :label="wordBook"
            :key="wordBook"
          >{{wordBook}}</el-checkbox>
        </el-checkbox-group>

        <div class="title">系统管理</div>
        <el-checkbox-group v-model="companyCheck">
          <el-checkbox v-for="system in systemList" :label="system" :key="system">{{system}}</el-checkbox>
        </el-checkbox-group>

        <div class="title">产品管理</div>
        <el-checkbox-group v-model="companyCheck">
          <el-checkbox v-for="product in productList" :label="product" :key="product">{{product}}</el-checkbox>
        </el-checkbox-group>

        <div class="title">订单管理</div>
        <el-checkbox-group v-model="companyCheck">
          <el-checkbox v-for="order in orderList" :label="order" :key="order">{{order}}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <div class="list" v-show="false">
      <span>允许删除：</span>
      <el-radio-group v-model="delMsg">
        <el-radio :label="3">是</el-radio>
        <el-radio :label="6">否</el-radio>
      </el-radio-group>
    </div>
    <div class="list">
      <span>角色状态：</span>
      <el-radio-group v-model="state">
        <el-radio label="0">启用</el-radio>
        <el-radio label="-1">停用</el-radio>
      </el-radio-group>
    </div>
    <div class="list submit">
      <el-button type="primary" @click="submit">提交</el-button>
      <el-button @click="cancle">取消</el-button>
    </div>
  </div>
</template>
<script>
import check from "utils/check";
import menuData from "data/leftMenus";
let requireArray = ["name", "state"]; //必传字段
export default {
  name: "roleNew",
  data() {
    return {
      name: "",
      delMsg: "",
      state: "0",
      companyCheck: [],
      companyMange: ["企业列表", "信息复核"],
      hosNetworkList: [
        "医院管理",
        "医生管理",
        "体检管理",
        "中医管理",
        "齿科管理"
      ],
      userManageList: ["用户列表", "驻场人员", "驻场审核列表"],
      wordBookList: ["地区管理", "科室管理", "医院等级", "医生职称"],
      systemList: ["用户管理", "角色管理"],
      productList: ["产品管理"],
      orderList: ["订单管理"],
      check: check.methods.check,
      checkTip: check.tips.checkTip
    };
  },
  mounted() {
    this.editInit();
  },
  methods: {
    editInit() {
      let { type, id } = this.$route.query;
      if (!id) return;
      this.loading = true;
      this.type = type;
      this.id = id;
      this.api
        .get(`/role/${id}`)
        .then(res => {
          //查询产品详情
          this.dataInit(res.data);
          this.loading = false;
        })
        .catch(err => {
          console.log(err);
          this.loading = false;
          this.$message(err.data.message);
        });
    },
    dataInit(data) {
      data = data || {};
      let { menu, role } = data;
      let { name, state } = role;
      this.name = name;
      this.state = state.toString();
      if (!menu || this.lodash.isArray(menu)) return;
      let menuDatas = JSON.parse(menu);
      let companyCheck = [];
      this.lodash.forEach(menuDatas, item => {
        this.lodash.forEach(item.childs, menu => {
          companyCheck.push(menu.entity.alias);
        });
      });
      this.companyCheck = companyCheck;
    },
    submit() {
      let datas = JSON.parse(JSON.stringify(menuData));
      let arryData = [];
      let checkList = [].concat(this.companyCheck);
      if (checkList.length < 1) return this.$message("请补全信息后提交");
      datas = this.lodash.filter(datas.childs, item => {
        item.childs = this.lodash.filter(item.childs, child => {
          return this.lodash.includes(checkList, child.entity.alias);
        });
        return item.childs.length > 0;
      });
      let param = {
        name: this.name,
        state: this.state,
        menu: JSON.stringify(datas)
      };
      this.check(param, requireArray)
        .then(
          () => {
            this.addUser(param);
          },
          () => {
            this.$message(this.checkTip);
          }
        )
        .catch(err => {
          console.log(err);
          this.$message(err.data.message);
        });
    },
    editUser(param) {
      //修改用户
      param.id = this.id;
      this.loading = true;
      this.api
        .put("/role", param)
        .then(res => {
          this.loading = false;
          this.$router.go(-1);
        })
        .catch(err => {
          console.log(err);
          this.loading = false;
          this.$message(err.data.message);
        });
    },
    addUser(param) {
      //添加用户
      if (this.$route.query.type === "edit") return this.editUser(param);
      this.loading = true;
      this.axios
        .post("/role", param)
        .then(res => {
          this.$router.go(-1);
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
          this.$message(err.data.message);
        });
    },
    cancle() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" scoped>
.role-new {
  padding-left: 20px;
  .el-input {
    width: 300px;
  }
  .el-radio,
  .el-checkbox {
    height: 40px;
    line-height: 40px;
  }
  .list {
    display: flex;
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;
    span {
      display: inline-block;
      height: 40px;
      line-height: 40px;
    }
    .list-text {
      display: inline-block;
      font-size: 12px;
      margin-left: 40px;
      margin-top: 1px;
      color: gray;
    }
    &.manage {
      height: inherit;
      line-height: inherit;
      .title {
        height: 40px;
        line-height: 40px;
        font-weight: 600;
      }
    }
    &.submit {
      display: inline-block;
      text-indent: 5em;
    }
  }
}
</style>